
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="head.htm" />

<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
	var directionDisplay;
	var directionsService = new google.maps.DirectionsService();
	var map;

	function initialize() {
		directionsDisplay = new google.maps.DirectionsRenderer();
		var deggendorf = new google.maps.LatLng(48.8333, 12.9667);
		var myOptions = {
			zoom : 12,
			mapTypeId : google.maps.MapTypeId.ROADMAP,
			center : deggendorf
		}
		map = new google.maps.Map(document.getElementById("map_canvas"),
				myOptions);
		directionsDisplay.setMap(map);
		directionsDisplay.setPanel(document.getElementById("directionsPanel"));
	}

	function calcRoute() {
		//var start = document.getElementById("start").value;
		var start = document.getElementById("start").value;
		var end = "48.8333, 12.9667";
		var request = {
			origin : start,
			destination : end,
			travelMode : google.maps.DirectionsTravelMode.DRIVING
		};
		directionsService.route(request, function(response, status) {
			if (status == google.maps.DirectionsStatus.OK) {
				directionsDisplay.setDirections(response);
			}
		});
	}
</script>
<style type="text/css">
body {
	font-family: calibri, arial
}
</style>
</head>
<body onload="initialize()">
	<div id="head">
		<div style="float: left; padding: 30px;">
			<h1>CarManagementSystem</h1>
		</div>
		<div style="float: right;">
			<img src="images/rahmen.png" />
		</div>
		<div style="clear: both;"></div>
	</div>

	<div style="padding: 50px;">
		<h2>
			<c:out value="${title}" />
		</h2>
		<p>
			<c:out value="${message}" />
		</p>
		<form method="post" action="SaveVerleih.html">
			<table class="editing">
				<colgroup>
					<col class="attribute" />
					<col class="value" />
				</colgroup>
				<tbody>
					<tr>
						<td>Typ des Autos:</td>
						<td><input type="hidden" name="id"
							value='<c:out value="${auto.id}"/>' /> <c:out value="${auto.typ}" />
						</td>
					</tr>
					<tr>
						<td>Mitarbeiter:</td>
						<td><select name="mitarbeiterId">
								<c:forEach items="${mitarbeiterList}" var="mitarbeiter">
									<option value="${mitarbeiter.id}">${mitarbeiter.vorname}
										${mitarbeiter.nachname}</option>
								</c:forEach>
						</select></td>
					</tr>
					<tr>
						<td>Kilometer der Route:</td>
						<td><input type="text" name="kilometerstand"
							value='<c:out value="${verleih.kilometerstand}"/>' size="20" />
						</td>
					</tr>
					<tr class="submit">
						<td colspan="2"><input type="submit"
							value=" Änderungen übernehmen " /></td>
					</tr>
				</tbody>
			</table>
		</form>

		<div>
			<b>Anfahrtplan: </b><br />Geben Sie Ihre Zieladresse an: <input
				id="start" onchange="calcRoute();"> <u>Suche</u> <br />
			<br />

		</div>
		<div>
			<div id="map_canvas" style="width: 500px; height: 300px"></div>
			<br />
			<div id="directionsPanel" style="width: 500px;"></div>
		</div>
	</div>
	<jsp:include page="menu.htm" />
</body>
</html>
